<template>
    <div class="recommend">
        <div class="recommend-title">热销推荐</div>
        <ul>
            <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
                <div class="item-img-wrapper"><img width="85" height="85" :src="item.imgUrl" /></div>
                <div class="item-info">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-desc">{{ item.desc }}</p>
                    <router-link tag="button" :to="/detail/+item.id" class="item-button">查看详情</router-link>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
import {$recommend} from '../../../assets/js/common.js'
export default{
  props:{
     recommendList:{
         type:Array
     }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixins.styl'

.recommend-title
    margin-top 10px
    line-height 40px
    background #eee
    text-indent 10px
.item
    display flex
    overflow hidden
    height 95px
    .item-img-wrapper
        padding 5px
    .item-info
        flex 1
        padding 5px
        min-width 0
        .item-title
            line-height 27px
            font-size 16px
            ellipsis()
        .item-desc
            line-height 20px
            font-size 10px
            color #ccc
        .item-button
            margin-top 8px
            background #ff9300
            padding 0 10px
            border-radius 3px
            color #fff
</style>
